<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div>
					<h1>简单的赛场管理
							<small>选手评分展示</small>
					</h1>
				</div>
				<div id="app">
					<table class="table table-condensed">
						<caption>选手信息</caption>
						<thead>
							<tr>
								<th>选手号</th>
								<th>选手姓名</th>
								<th>地区</th>
								<th>分数</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<td>{{item.id}}</td>
								<td>{{item.name}}</td>
								<td>{{item.addr}}</td>
								<td v-if="item.score">{{item.score}}</td>
								<td v-else>
									未评分
								</td>
							</tr>
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
			
			
		
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data(){
				return {
					list:null
				}
			},
			mounted(){
				axios
					.get('./score-list.php')
					.then(response => {
						console.log(this)
						this.list = response.data
					})
					.catch(function(error){
						console.log(error);
					});
					
			}
		})
	</script>
</html>
